Vue.component("my-table", {
    template: '<div>' +
        '    <el-table ref="table" :data="data" border stripe style="width: 100%" @selection-change="selectionChange" @cell-click="cellClick" >' +
        // 第一列，多选开关。selection(Boolean)， 默认false
        '      <el-table-column v-if="selection" type="selection" width="55"></el-table-column>' +
        // 表格标题 + 内容
        '      <el-table-column :prop="item.key" :label="item.title" :width="item.width" v-for="item in columns" :key="item.key" align="center" >' +
        '        <template slot-scope="scope">' +
        '          <slot v-if="$scopedSlots[item.key]" :name="item.key" :data="scope.row" ></slot>' +
        '          <span v-else>{{ scope.row[item.key] }}</span>' +
        '        </template>' +
        '      </el-table-column>' +
        // 操作栏，可插槽
        '      <el-table-column label="操作" :width="operationWidth" v-if="$scopedSlots.operation" align="center">' +
        '        <template slot-scope="scope">' +
        // 编辑按钮
        '           <el-button size="small" type="primary" @click="handleEdit(scope.row)" plain>编辑</el-button>' +
        // 删除按钮
        '           <el-popconfirm title="这是一段内容确定删除吗？" @confirm="handleDelete(scope.index, scope.data)">' +
        '                <el-button size="small" type="danger" slot="reference" class="ml-2" plain>删除</el-button>' +
        '           </el-popconfirm>' +
        '          <slot name="operation" :index="scope.$index" :data="scope.row"></slot>' +
        '        </template>' +
        '      </el-table-column>' +
        '    </el-table>' +
        // 分页栏
        '    <div class="pagination" v-if="pagination">' +
        '      <el-pagination @size-change="handleSize" @current-change="handleCurrent" :current-page="page2"' +
        '        :page-sizes="sizes" :page-size="size2" layout="total, sizes, prev, pager, next, jumper" :total="total">' +
        '      </el-pagination>' +
        '    </div>' +
        '  </div>',
    props: {
        // 表格数据
        data: {
            type: Array,
            default: function () {
                return [];
            }
        },
        // 表格列
        columns: {
            type: Array,
            default: function () {
                return [];
            }
        },
        // 多选开关
        selection: {
            type: Boolean,
            default: function () {
                return false;
            }
        },
        // 操作列宽度
        operationWidth: {
            type: Number,
            default: function () {
                return "";
            }
        },
        // 分页显示/隐藏
        pagination: {
            type: Boolean,
            default: function () {
                return false;
            }
        },
        // 页数大小数组
        sizes: {
            type: Array,
            default: function () {
                return [10, 20, 50, 100, 200, 500];
            }
        },
        // 分页显示多少条信息
        size: {
            type: Number,
            default: function () {
                return 10;
            }
        },
        // 当前页
        page: {
            type: Number,
            default: function () {
                return 1;
            }
        },
        // 总共多少条
        total: {
            type: Number,
            default: function () {
                return 0;
            }
        }
    },
    data() {
        return {
            // 分页显示多少条
            size2: this.size,
            // 页数
            page2: this.page
        };
    },
    mounted() {
    },
    methods: {
        /**
         * 多选结果集合
         */
        selectionChange(val) {
            this.$emit("selectionChange", val);
        },
        /**
         * 点击了单元格行
         */
        cellClick(row, column, cell, event) {
            column;
            cell;
            event;
            this.$emit("cellClick", row);
        },
        /**
         * 改变了分页大小
         */
        handleSize(size) {
            this.page2 = 1;
            this.size2 = size;
            let data = {
                page: this.page2,
                size: size
            };
            this.$emit("pagination", data);
        },
        /***
         * 改变了分页页数
         */
        handleCurrent(current) {
            this.page2 = current;
            let data = {
                page: current,
                size: this.size2
            };
            this.$emit("pagination", data);
        },
        // 修改方法
        handleEdit(row) {
            console.log(row)
            // 如果传递了方法，执行方法
            if (this.$listeners['handleEdit']) {
                this.$emit("handleEdit", row);
            } else {
                // 没传递方法，执行默认方法
                this.$parent.handleEdit(row)
            }
        }
    }
})